<template>
  <div class="panel pie">
    <h2>年度销量对比</h2>
    <div ref="target" class="chart">图表</div>
    <div class="panel-footer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
// const props = defineProps({
//   data: {
//     type: Object,
//     required: true,
//   },
// });
// console.log(props.data);
const target = ref(null);
// let是用来声明变量的，const是用来声明常量的
let myChart = null;
var options;
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});
const renderChart = () => {
  options = {
    title: {
      text: "销量",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["精煤", "中煤", "煤泥"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["2020", "2021", "2022", "2023", "2024"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "精煤",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 150],
      },
      {
        name: "中煤",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 240],
      },
      {
        name: "煤泥",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 200],
      },
    ],
  };

  options && myChart.setOption(options);
  //跟随屏幕一起缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );
</script>

<style></style>
